﻿@page
@model KentNoteBook.WebApp.Pages.Home.ProfileModel
@{
	ViewData["Title"] = "UserEdit";

	Layout = null;
}
<style type="text/css">
	.file-preview { display: inline-block; width: auto; }
</style>
<form id="form_user" class="pl-3" method="post" ajax-form="true">
	@Html.HiddenFor(x => x.Id)

	<div class="form-group row">
		<label class="col-sm-2 col-form-label-sm">User Name </label>
		<div class="col-sm-8">
			@Html.TextBoxFor(x => x.Data.Name, new { @class = "form-control form-control-sm", @readonly = "readonly" })
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 col-form-label-sm" for="NickName">Nick Name</label>
		<div class="col-sm-8">
			@Html.TextBoxFor(x => x.Data.NickName, new { @class = "form-control form-control-sm" })
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 col-form-label-sm" for="Avatar">Avatar</label>
		<div class="col-sm-8">
			<input id="attachmentfile" name="attachmentfile" type="file" class="file" />
			@Html.HiddenFor(x => x.Data.Avatar)
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 col-form-label">Email</label>
		<div class="col-sm-8">
			@Html.TextBoxFor(x => x.Data.Email, new { @class = "form-control form-control-sm" })
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 col-form-label">Mobile</label>
		<div class="col-sm-8">
			@Html.TextBoxFor(x => x.Data.Mobile, new { @class = "form-control form-control-sm" })
		</div>
	</div>
	<div class="form-group row">
		<label class="col-sm-2 col-form-label">&nbsp;</label>
		<div class="col-sm-8">
			<button id="btnSaveProfile" type="submit" class="btn btn-primary" ajax-button="true" data-alert-panel="#form_user_alert_panel" data-update-panel="#tbUsers" asp-page-handler="Save">Save changes</button>
			<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
		</div>
	</div>
	@Html.ValidationSummary(false, null, new { @class = "alert alert-danger" })
	<div id="form_user_alert_panel"></div>
</form>

<script type="text/javascript">

	$(function () {
		$("#attachmentfile").fileinput({
			uploadUrl: "/FileUpload/Upload",
			enctype: 'multipart/form-data',

			dropZoneEnabled: false,
			autoReplace: true,
			showUpload: true,
			showCaption: true,
			showPreview:true,
			uploadAsync: false,
			validateInitialCount: true,
			maxFileCount: 1,
			allowedPreviewTypes: ['image'],

			browseClass: "btn btn-primary",
			browseIcon: "<i class='fa fa-folder-open'></i>&nbsp;",
			removeIcon: "<i class='fa fa-trash'></i> &nbsp;",
			uploadIcon: "<i class='fa fa-upload'></i>&nbsp;",
			layoutTemplates: {
				actionUpload: "",
				actionZoom: "",
				btnLink: '<a href="{href}" target="self" tabindex="500" title="{title}" class="{css}"{status}>{icon}{label}</a>',
				actionDelete: "",
			},
			fileActionSettings: {
				indicatorNew: '<i class="fa fa-plus text-warning"></i>',
				indicatorSuccess: '<i class="fa fa-check-circle text-success"></i>',
				indicatorError: '<i class="fa fa-exclamation-sign text-danger"></i>',
				indicatorLoading: '<i class="fa fa-hourglass text-muted"></i>',
			},
			initialPreview:['@Model.Data.Avatar'===''?"":"<img class='rounded img-thumbnail file-preview-image kv-preview-data' src='@Model.Data.Avatar'/>"],
			ajaxSettings: {
				headers: { 'Authorization': "Bearer " + localStorage.getItem("access_token") }
			},
		});

		// When the upload process is done
		$("#attachmentfile").on("fileuploaded", function (event, data, previewId, index) {
			var resp = data.response;
			if (resp && resp.Code) {
				$("#Data_Avatar").val(resp.Data.FileRelativePath);
			}
		});
	});

	$("#btnSaveProfile").click(function () {
		$("#attachmentfile").fileinput("upload");
		return false;
	});

	$('#attachmentfile').on('filecleared', function (event) {
		$("#Data_Avatar").val("");
	})
	.on("filebatchuploadsuccess", function (event, data, previewId, index) {
		var resp = data.response;
		if (resp && resp.Code) {
			$("#Data_Avatar").val(resp.Data.FileRelativePath);
		}
	});

	$("#btnSaveProfile").data("preCall", function () {
		var $fileUploader = $("#attachmentfile");

		var hasPendingFiles = false;
		$fileUploader.each(function () {
			if ($(this).fileinput('getFilesCount')) {
				hasPendingFiles = true;
				return;
			}
		});

		if (!hasPendingFiles) {
			return true;
		}
		$("#form_user_alert_panel").fail("Please upload the avatar image first!");
		return false;
	});

	function checkIfExsitingPendingFiles() {


		return false;
	}

	//$("#required-multiple-files")
	//	.on("filebatchuploadsuccess", function (event, data, previewId, index) {
	//		onFileBatchUploadSuccess(data, $("#tbRequiredAttachment"), $("#Data_RequiredAttachmentNames"), $("#Data_RequiredAttachmentPaths"));
	//	})
	//	.on("filebatchselected", function (event, files) {
	//		onFilebatchselected($("#Data_RequiredAttachmentNames"), $("#Data_RequiredAttachmentPaths"));
	//	});
</script>
